<template>
  <div>
    <!-- 使用 CustomVxeItemsTable 组件 -->
    <CustomVxeItemsTable
      id="quotationItemsTable"
      ref="tableRef"
      :data="tableData"
      :totalData="totalData"
      :totalFields="totalFields"
      :isShowSort="true"
      :isDisabled="false"
      :isShowToolbar="true"
      :controlsColumnWidth="120"
      :row-config="rowConfig"
      :column-config="columnConfig"
      :row-drag-config="rowDragConfig"
      @row-dragstart="rowDragstartEvent"
      @row-dragend="rowDragendEvent"
      @handle-edit="onEdit"
      @handle-delete="onDelete"
      @insert-event="onInsertEvent"
    >
      <!-- 通过插槽自定义列 -->
      <template #columns>
        <vxe-column field="name" title="Name" />
        <vxe-column field="quantity" title="Quantity" />
        <vxe-column field="price" title="Price" />
      </template>

      <!-- 通过插槽自定义操作列 -->
      <template #actionColumn="{ row }">
        <vxe-button mode="text" size="mini" icon="vxe-icon-edit" @click="onEdit(row)" />
        <vxe-button mode="text" size="mini" icon="vxe-icon-delete" @click="onDelete(row)" />
      </template>
    </CustomVxeItemsTable>
  </div>
</template>

<script setup>
const rowDragConfig = reactive({
  icon: 'vxe-icon-sort'
})
const rowConfig = reactive({
  useKey: true,
  drag: true
})
const columnConfig = reactive({
  useKey: true
})

const rowDragstartEvent = ({ row }) => {
  console.log(`拖拽开始 ${row.name}`)
}
const rowDragendEvent = ({ newRow, oldRow }) => {
  console.log(`拖拽完成，旧行 ${oldRow.name} 新行 ${newRow.name}`)
}

const tableData = ref([
  { id: 1, name: 'Item 1', quantity: 10, price: 100 },
  { id: 2, name: 'Item 2', quantity: 20, price: 200 }
])
const tableRef = ref(null)

onMounted(() => {
  console.log('tableRef:', tableRef.value.getTableInstance())
})
const totalData = ref({
  total_net_amount: 1000,
  total_discount_amount: 100,
  total_net_less_discount: 900,
  total_delivery_pick_up_fee: 50,
  total_gst_amount: 90,
  total_gross_amount: 1040
})

const totalFields = ref([
  { label: 'Net Amount', key: 'total_net_amount' },
  { label: 'Discount Amount', key: 'total_discount_amount' },
  { label: 'Net Less Discount', key: 'total_net_less_discount' },
  { label: 'Delivery Fee', key: 'total_delivery_pick_up_fee' },
  { label: 'GST Amount', key: 'total_gst_amount' },
  { label: 'Gross Amount', key: 'total_gross_amount' }
])

// 父组件方法，处理来自子组件的事件
const onEdit = row => {
  console.log('Edit row:', row)
}

const onDelete = row => {
  console.log('Delete row:', row)
}

const onInsertEvent = value => {
  console.log('Insert event triggered:', value)
}
</script>
